<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<html>
	<head>
		<title>update Emp</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath }/ems/css/style.css" />
		<script type="text/javascript" src="${pageContext.request.contextPath }/ems/js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/ems/js/time.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/ems/js/datepricker/WdatePicker.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/ems/js/time.js"></script>
		<script>
			$(function (){

				//创建日期插件
				$(".Wdate").click(function(){
					WdatePicker();
				});

			});
		</script>
	</head>

	<body>
		<div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>
								<span id="time"></span>
								<script type="text/javascript">
									showtime();
								</script>
								<br />
							</p>
						</div>
						<div id="topheader">
							<h1 id="title">
								<a href="#">Main</a>
							</h1>
						</div>
						<div id="navigation">
						</div>
					</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						update Emp info:
					</h1>
					<form action="/ems/emp/update" method="post">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									id:
								</td>
								<td valign="middle" align="left">
									${requestScope.emp.id}
									<input type="hidden" name="id" value="${requestScope.emp.id}" />
									<input type="hidden" name="deptId" value="${requestScope.emp.deptId}" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									name:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="name" value="${requestScope.emp.name}"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									salary:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="salary" value="${requestScope.emp.salary}"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									age:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="age" value="${requestScope.emp.age}"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									birthday:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="Wdate" readonly="readonly" name="birthday" value="${requestScope.emp.birthday}" format="yyyy-MM-dd" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									所属部门:
								</td>
								<td valign="middle" align="left">

									<select onclick="getDept()" name="deptId" id="dept">
										<option  disabled selected value="${requestScope.emp.deptId}" >${requestScope.emp.deptId}&nbsp;${requestScope.emp.dept.name}</option>
									</select>


							</tr>
						</table>
						<p>
							<input type="submit" class="button" value="Confirm" />
						</p>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ABC@126.com
				</div>
			</div>
		</div>

		<script>

			var count = 0;

			function getDept() {

				if (count == 0) {
					$.ajax({
						method: "get",//ajax请求的方式  方法
						url: "http://localhost:8888/ems/dept/findAll",//请求的地址
						data: {},//请求的数据"name=hongtao&age=18"   {"name":"王渊","age":18}
						/*dataType:"json",*/
						success: function (data) {
							//alert(data);
							//将json数据转换
							//JSON.parse(data)  将json 转化为前端对象
							//JSON.parse(data).depts  转化为第一个对象数组
							//遍历数组的所有对象 dept
							var jsonData = JSON.parse(data).depts
							console.log(jsonData )


							var htmls;

							for (var i = 0; i < jsonData.length; i++) {
								htmls = "<option value=" + jsonData[i].id + ">" + jsonData[i].name + "</option>";
								$("#dept").append(htmls)
							}

							count++;

						},
						error: function (data) {
							alert(data.toString())
						}

					})
				}
			}
		</script>

	</body>
</html>
